<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/10/21
  Time: 13:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<html>
<head>
    <title>去往目的地</title>
    <style>
        /* 为包含按钮的父元素添加样式，使其内容居中 */
        .button-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; /* 使按钮纵向排列 */
            margin-top: 20px; /* 根据需要调整按钮与上方内容的间距 */
        }
    </style>
</head>
<body>
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="${path}/static/js/jquery-3.2.1.min.js"></script>
    <title>骑行路线规划</title>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=5k8Rpa7Bi5HSNNuhjT0EqI6GvMfdQaxe"></script>
    <style type="text/css">
        body, html, #container {
            width: 80%;
            height: 80%;
            overflow: hidden;
            margin: 0 auto;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
<div id="container">
    <div class="button-container">
        <button onclick="location.href='${path}/runner/index'" style="width: 50px; height: 30px;">返回</button>
    </div>
</div>

<div>
    <form action="${path}/runner/goDelivery">
        <input type="hidden" value="${requestScope.order.id}" name="id">
        <div class="button-container">
            <input type="submit" value="去配送">
            <button onclick="location.href='${path}/runner/index'" style="width: 50px; height: 30px;">返回</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    var map = new BMapGL.Map("container");
    map.centerAndZoom(new BMapGL.Point(${requestScope.order.task.longitude}, ${requestScope.order.task.latitude}), 14);
    var riding = new BMapGL.RidingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true
        }
    });

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var start = new BMapGL.Point(position.coords.longitude, position.coords.latitude);
            var end = new BMapGL.Point(${requestScope.order.task.longitude}, ${requestScope.order.task.latitude});
            riding.search(start, end);
        }, function (error) {
            console.error('获取位置失败：', error);
        });
    } else {
        console.error('浏览器不支持地理定位。');
    }
    map.setMinZoom(3); // 设置最小缩放级别，可根据需求调整
    map.setMaxZoom(19); // 设置最大缩放级别，可根据需求调整
</script>
</html>
</body>
</html>